<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate" />
        </ion-buttons>

        <ion-title>
            <h1>{{ 'core.login.accounts' | translate }}</h1>
        </ion-title>

        <ion-buttons slot="end">
            <ion-button fill="clear" *ngIf="accountsList.count > 0" (click)="toggleDelete()"
                [ariaLabel]="'core.login.toggleremove' | translate">
                <ion-icon slot="icon-only" name="fas-pen" aria-hidden="true" />
            </ion-button>
            <ion-button (click)="openSettings()" [ariaLabel]="'core.settings.appsettings' | translate">
                <ion-icon slot="icon-only" name="fas-gear" aria-hidden="true" />
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content class="limited-width">
    <core-loading [hideUntil]="loaded">
        <core-sites-list [accountsList]="accountsList" [sitesClickable]="true" (onSiteClicked)="login($event)">
            <ng-template #siteItem let-site="site" let-isCurrentSite="isCurrentSite">
                <ion-badge slot="end" *ngIf="!showDelete && site.badge" @coreShowHideAnimation>
                    <span aria-hidden="true">{{site.badge}}</span>
                    <span class="sr-only">{{ 'core.login.sitebadgedescription' | translate:{ count: site.badge }
                        }}</span>
                </ion-badge>
                <ion-button *ngIf="showDelete" slot="end" fill="clear" color="danger" (click)="deleteSite($event, site)"
                    [ariaLabel]="'core.login.removeaccount' | translate" [@coreSlideInOut]="'fromRight'">
                    <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true" />
                </ion-button>
            </ng-template>
        </core-sites-list>
    </core-loading>
    <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end">
        <ion-fab-button (click)="add()" [attr.aria-label]="'core.login.add' | translate">
            <ion-icon name="fas-plus" aria-hidden="true" />
            <span class="sr-only">{{ 'core.login.add' | translate }}</span>
        </ion-fab-button>
    </ion-fab>
</ion-content>
